<template>
  <div class="mapContainer">
    <div id="container"></div>
    <a-button type="default" style="z-index:99" @click="test">周边配置</a-button>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  components:{},
  data(){
    return {
      map:null,
    }
  },
  created(){},
  mounted(){
    this.$nextTick(()=>{
      this.initMap()
    })
  },
  watch:{},
  computed:{},
  methods:{
    initMap(){
         AMapLoader.load({
          "key": "c4122c0ba071b26442d921158ff037d8",  
          "version": "2.0",   
          "plugins": ['AMap.Geolocation']     
          }).then((AMap)=>{
          this.map = new AMap.Map('container');
           let Geolocation=new AMap.Geolocation({
              enableHighAccuracy: true,
              // 设置定位超时时间，默认：无穷大
              timeout: 10000,
              // 定位按钮的停靠位置的偏移量
              offset: [10, 20],
              //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              zoomToAccuracy: true,     
              //  定位按钮的排放位置,  RB表示右下
              position: 'RB'
           })
          this.map.addControl(Geolocation)

          Geolocation.getCurrentPosition((status,result)=>{
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
          })
           function onComplete (data) {
             console.log(data);
          }
          function onError (data) {
            console.log(data);
          }

          }).catch(e => {
          console.log(e);
          })
    },
  },
}
</script>
<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
</style>